import React from 'react';
import { Button, Dropdown, Icon, Menu, Table } from 'antd';
import config from 'config';
import Importer from 'components/template/importer';
import { messages } from 'share/common';
import menuRoute from 'routes/menuRoute';
import ExportModal from 'components/template/export-modal/export-modal';
import { connect } from 'react-redux';

class ExpenseTypeImportExport extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showImporter: false,
      newExpenseTypePage: menuRoute.getRouteItem('new-expense-type'),
      tabKey: 'UPDATE',
      templateUrl: '',
      uploadUrl: '',
      title: '',
      downFileName: '',
      importType: '',
    };
  }


  handleImportExpenseType = (type) => {
    let { templateUrl, uploadUrl, title, downFileName, importType } = this.state;
    const { expenseTypeSetOfBooks } = this.props;
    const timestamp = (new Date()).getTime();
    switch (type) {
      case 'expenseType':
        templateUrl = '/api/expense/type/template/download';
        uploadUrl = `/api/expense/type/template/upload/${expenseTypeSetOfBooks.id}`;
        title = messages('setting.key1835')/*导入费用类型*/;
        downFileName = messages('setting.key1205')/*费用类型*/ + `${'__' + timestamp}`;
        break;
      case 'expenseStandard':
        templateUrl = '/api/travel/standards/travelStandard/exportTemplate';
        uploadUrl = '/api/travel/standards/config/import';
        title = messages('setting.key1533'); /*导入费用规则*!/*/
        downFileName = messages('setting.key1534'); /*费用标准*!/*/
        break;
    }
    importType = type;
    this.setState({ templateUrl, uploadUrl, title, downFileName, importType, showImporter: true });
  };

  handleNewExpenseType = () => {
    this.context.router.push(this.state.newExpenseTypePage.url);
  };

  handelImportCallBack = (result) => {
    let resultData = {};
    if (result.success) {
      this.props.updateExpenseType();
      resultData.resultDom = (<div>{messages('setting.key1836')/*导入成功*/}</div>);
      resultData.result = true;
    } else {

      resultData.resultDom = (
        <div>
          <div style={{ marginBottom: 10 }}>
            {messages('setting.key1837')/*导入失败*/}
          </div>
          {result.rows
            ? <a href={result.rows.fileURL}>{messages('setting.key1838')/*下载错误文件*/}</a>
            : <span>{result.message}</span>
          }
        </div>
      );
      resultData.result = false;
    }
    return resultData;
  };

  render() {
    const { showImporter, templateUrl, uploadUrl, title, downFileName, tabKey, importType } = this.state;
    const { expenseTypeSetOfBooks } = this.props;
    const { tenantMode } = this.props;
    const exportArray = [
      {
        key: 1,
        name: messages('setting.key1839')/*全部费用类型*/,
        body: { setOfBooksId: expenseTypeSetOfBooks.id, editAble: null }
      }, {
        key: 2,
        name: messages('setting.key1840')/*可导入的费用类型*/,
        body: { setOfBooksId: expenseTypeSetOfBooks.id, editAble: true }
      }
    ];
    const menu = (
      <Menu>
        {exportArray.map(item => {
          return (
            <Menu.Item key={item.key}>
              <ExportModal
                disabled={false}
                codeCheck={true}
                exportTitle={item.name}
                exportType="EXPENSE_TYPE_REPORT"
                exportCondition={item.body}
                exportCommand={'EXPENSE_TYPE_REPORT'}/>
            </Menu.Item>
          );
        })
        }
      </Menu>
    );
    return (
      <div>
        {
          tenantMode &&
          <div>
            <Button type="primary" onClick={this.handleNewExpenseType}>
              {messages('setting.key514'/*新增费用类型*/)}
            </Button>

            <Button style={{ marginLeft: 8 }} onClick={() => this.handleImportExpenseType('expenseType')}>
              {messages('setting.key1835')/*导入费用类型*/}
            </Button>

            <Dropdown overlay={menu}>
              <Button style={{ marginLeft: 8 }}>
                {messages('setting.key1841')/*导出费用类型*/} <Icon type="down"/>
              </Button>
            </Dropdown>
          </div>
        }
        {
          !tenantMode &&
          <Button type="primary" onClick={() => this.handleImportExpenseType('expenseStandard')}>
            {messages('setting.key1532')/*导入费用标准*/}
          </Button>
        }
        <Importer visible={showImporter}
                  title={title}
                  templateUrl={`${config.baseUrl}${templateUrl}`}
                  uploadUrl={`${config.baseUrl}${uploadUrl}`}
                  downFileName={downFileName}
                  isImporterResultDom={importType === 'expenseType'}
                  tabKey={tabKey}
                  callBackResult={(result) => this.handelImportCallBack(result)}
                  accept=".xlsx"
                  afterClose={() => this.setState({ showImporter: false })}
                  noTransaction/>
      </div>
    );
  }
}

ExpenseTypeImportExport.contextTypes = {
  router: React.PropTypes.object,
};

ExpenseTypeImportExport.Proptypes = {
  updateExpenseType: React.PropTypes.func
};


function mapStateToProps(state) {
  return {
    tenantMode: state.main.tenantMode,
    expenseTypeSetOfBooks: state.setting.expenseTypeSetOfBooks
  };
}

export default connect(mapStateToProps)(ExpenseTypeImportExport);

